<template>
	<div id="startup">
		<el-form :inline="true" class="demo-form-inline">
			<el-row >
				<el-col>
					<el-form-item label="流程名称：">
						<el-input v-model="processName" placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item label="流程key：">
						<el-input v-model="processKey" placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item label="任务名称：">
						<el-input v-model="taskName" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="创建时间：">
						<el-col :span="11">
							<el-form-item prop="date1">
								<el-date-picker v-model="establishSatrtTime" type="date" placeholder="请选择日期" > </el-date-picker>
							</el-form-item>
						</el-col>
						<el-col class="line" :span="2"><b class="data-line-red">*</b>至</el-col>
						<el-col :span="11">
							<el-form-item prop="date2">
								<el-date-picker v-model="establishEndTime" type="date" placeholder="请选择日期" ></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-button type="primary" @click="search">查询</el-button>
				</el-col>
			</el-row>
		</el-form>

		<div>
			<template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="name" label="任务名称"></el-table-column>
					<el-table-column prop="createTime" label="创建时间"></el-table-column>
					<el-table-column prop="priority" label="优先级" width="180"></el-table-column>
					<el-table-column prop="claimTime" label="签收时间" width="180"></el-table-column>
					<el-table-column label="操作" width="150">
						<template scope="scope">
							<el-button @click="handle(scope.row)" type="text" size="small">处理</el-button>

						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage.page" :page-sizes="pageSize" :page-size="currentPage.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		name: 'startup',
		data() {
			return {
				state: [{
					label:'一般',
					value:'normal',
				},{
					label:'中等',
					value:'middle',
				},{
					label:'优先',
					value:'high',
				}], //优先级
				stateValue: '',
				classification: '',
				processName: '',
				processKey: '',
				establishSatrtTime: '',
				establishEndTime: '',
				tableData: [],
				currentPage: {
					page: 1,
					pageNum: 10,
				},
				pageSize: ['10', '15', '50'],
				total: 400,
				dialogVisible: false, //控制dialog
				inputProcessName: '', //输入流程名称
				inputStateValue: '',
				inputState: [],
				processId: '',
				definitionInfoName: '', //流程名称
				definitionInfoVersion: '', //版本
				definitionInfoDescribe: '', //描述
				taskName:'',
			}
		},
		mounted: function() {
			var that = this;
			console.log(that.currentPage)
			that.establishEndTime = new Date(that.establishEndTime).valueOf();
				that.establishSatrtTime = new Date(that.establishSatrtTime).valueOf();
			var data = {
				searchName: that.processName,
				pageSize: that.currentPage.pageNum,
				currentPage: that.currentPage.page,
				priority: that.stateValue,
				startAfter:that.establishEndTime,
				startBefore:that.establishSatrtTime,
				taskName:that.taskName,
				
			};
			this.$http.post('http://localhost/act/taskInstance/getTodoTaskInstances',
				data
			).then(function(data) {
				if(data.data.messageCode == 0) {
					var tableData = data.data.data
						Date.prototype.Format = function(fmt) { //author: meizz 
							var o = {
								"M+": this.getMonth() + 1, //月份 
								"d+": this.getDate(), //日 
								"h+": this.getHours(), //小时 
								"m+": this.getMinutes(), //分 
								"s+": this.getSeconds(), //秒 
							};
							if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
							for(var k in o)
								if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
							return fmt;
						} //转换后端的日期格式
						for(var i = 0; i < tableData.length; i++) {
						tableData[i].createTime=new Date(tableData[i].createTime).Format("yyyy-MM-dd hh:mm:ss")
						}
						console.log(tableData)
						that.tableData = tableData
					that.total = data.data.total
				}

			}, function(error) {

			})
		},
		methods: {
			search() {
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var that = this;
				console.log(that.currentPage)
				var data = {
				searchName: that.processName,
				pageSize: that.currentPage.pageNum,
				currentPage: that.currentPage.page,
				priority: that.stateValue,
				startBefore:that.establishEndTime,
				startAfter:that.establishSatrtTime,
				taskName:that.taskName,
				};
				this.$http.post('http://localhost/act/taskInstance/getTodoTaskInstances',
					data
				).then(function(data) {
					loading.close();
					if(data.data.messageCode == 0) {
						var tableData = data.data.data
						Date.prototype.Format = function(fmt) { //author: meizz 
							var o = {
								"M+": this.getMonth() + 1, //月份 
								"d+": this.getDate(), //日 
								"h+": this.getHours(), //小时 
								"m+": this.getMinutes(), //分 
								"s+": this.getSeconds(), //秒 
							};
							if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
							for(var k in o)
								if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
							return fmt;
						} //转换后端的日期格式
						for(var i = 0; i < tableData.length; i++) {
						tableData[i].createTime=new Date(tableData[i].createTime).Format("yyyy-MM-dd hh:mm:ss")
						}
						console.log(tableData)
						that.tableData = tableData
						that.total = data.data.total
					}

				}, function(error) {
					loading.close();

				})

			},
			handle(value) {
				console.log(value)
				console.log(value.processInstanceId)
				console.log(value.taskInstanceId)
				localStorage.setItem('processInstanceId', value.processInstanceId);
				localStorage.setItem('taskInstanceId', value.id);
				localStorage.setItem('processDefinitionId', value.processDefinitionId)
				this.$router.push({
					path: '/handle'
				});
			},
			handleSizeChange(val) { //	 console.log(val)
				var vm = this
				vm.currentPage.pageNum = val;
				vm.search()
			},
			handleCurrentChange(val) {
				var vm = this
				console.log(`当前页: ${val}`);
				vm.currentPage.page = val
				vm.search()

			},
		},
	}
</script>

